<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素大小位置的另外方法</title>
    <style>
        body {
            height: 2000px;
        }

        div {
            width: 200px; /* 宽高 背景色 */
            height: 200px;
            background-color: pink;
            margin: 100px; /* 外边距 */
        }
    </style>
</head>
<body>
<h3>元素尺寸于位置-尺寸</h3>
<p>
    element.getBoundingClientRect() <br>
    方法返回元素的大小及其相对于视口的位置 (视口 移动Web,可视区域)
</p>
<img src="获取元素位置和尺寸-总结.png" alt="">
<hr>

<div>盒子</div>

<script>
    const div盒子 = document.querySelector('div')
    // 特别注意,这个方法是针对 视口 的, 即相对于视口的位置
    console.log(div盒子.getBoundingClientRect()) // 控制台看信息, 输出的是 对象,对象里有盒子的属性信息
</script>


</body>
</html>